<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*结合实际html结构--通配【合理】*/
			
			*{
				font-size: 16px;
				font-family: 微软雅黑;
				text-decoration:none;
				list-style-type: none;
				list-style: none;
				/*去全部样式
				tyle:去列表项样式
				position：去列表项标记位置样式
				image：去列表项图片标记样式
				*/
				margin:0% ;
				padding: 0%;
			}
			aside{
				width: 235px;
				height: 450px;
				border: 1px  solid red;
				background-color: bisque;
				margin-left: 20px;
				margin-top: 20px;
			}
			/**左栏效果
			 * 1.左栏空间区域 235*450 背景颜色
			 *2.左栏区域内容【li】 加权 235*50  相对定位--挂靠点【固定位置】
			 *3.给每一个【li】加鼠标移动该背景颜色
			 *4.左弹出框：400*450  1象素边框  绝对定位--微调
			 */
			ul.sidebar li{
				height: 50px;
				width: 235px;
				position: relative;
				text-align: center;
			}
			ul.sidebar li:hover{
				background-color: aqua;
			    color: mediumvioletred;	
			}
			ul.sidebar div.out{
				height: 450px;
				width: 400px;
				border: 1px solid red;
				position: absolute;
				top:20px;
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标签】 aside元素 针对：左栏、广告、弹出效果...有利于SEO优化
		 之前版本通过div+id起别名方式【缺点：繁琐、繁琐、定义起名、冗余】
		 -->
		 <aside>/*左栏区*/
			 <ul class="sidebar">
				 <!-- 弹出框-->
				 <div class="out"></div>
			 	<li>手机</li>
			 	<li>电脑</li>
			 	<li>家具</li>
			 	<li>男装</li>
			 	<li>女装</li>
			 	<li>桌子</li>
			 	<li>椅子</li>
			 	<li>凳子</li>
			 	<li>篮子</li>
			 </ul>
		 </aside>
	</body>
</html>